<template>
    <!-- dialog窗口 用于添加和编辑的弹窗-->
    <el-dialog :title="title" @close="dialogClose" :visible="visible">
        <el-form :model="stuForm" :rules="stuRules" ref="stuDialogRuleForm">
            <el-form-item label="头像">
                <el-upload class="uploadAvatar" ref="uploadAvatar" action="/api/students/uploadStuAvatar"
                    list-type="picture-card" :on-success="uploadSuccess" :on-remove="removeAvatar" :limit="1"
                    name="headimgurl" :multiple="false">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="stuForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="项目地址" prop="productUrl">
                <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="班级" prop="class">
                <el-input v-model="stuForm.class" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="stuForm.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
                <el-input v-model="stuForm.city" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="degree">
                <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="stuForm.description" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('cancel')">取 消</el-button>
            <el-button type="primary" @click="confirm('stuDialogRuleForm')">
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default() {
                return false;
            },
        },
    },
    data() {
        return {
            title: "增加学员信息",
            showAvatar: true,
            stuRules: {
                name: [{ required: true, message: "请输入名字", trigger: "blur" }],
                class: [{ required: true, message: "请输入班级", trigger: "blur" }],
                degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
                city: [{ required: true, message: "请输入城市", trigger: "blur" }],
                productUrl: [
                    { required: true, message: "请输入项目地址", trigger: "blur" },
                ],
                age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
                description: [
                    { required: true, message: "请输入描述", trigger: "blur" },
                ],
            },
            stuForm: {
                name: "",
                productUrl: "",
                headimgurl: "",
                class: "",
                age: "",
                city: "",
                degree: "",
                description: "",
            },
            oldFrom: {},
        };
    },
    created() { },
    mounted() { },
    methods: {
        dialogClose() {
            //dialog关闭时触发的回调
            //通过父组件传递下来的方法,关闭dialog
            this.$emit("cancel");
        },
        uploadSuccess(r) {
            //图片上传成功的回调
            console.log(r);
            //手动给stuForm的headimgurl赋值
            if (r.state) {
                this.stuForm.headimgurl = r.headimgurl;
            } else {
                this.$message.error(r.msg + "-" + r.err);
            }
            // console.log(r);
            // this.stuForm.headimgurl = r.headimgurl;
        },
        removeAvatar(r) { },
        //点击确定按钮
        confirm(formName) {
            //表单本地校验
            this.$refs[formName].validate((valid) => {
                // console.log(valid)
                // console.log(this.stuForm);
                if (valid) {
                    this.$emit("ok", this.stuForm);
                }

                //清掉图片上传的列表
                // this.$refs.uploadAvatar.clearFiles()
            });
        },
    },
};
</script>
<style>
.uploadAvatar {
    text-align: left;
}

.el-upload-list__item.is-success,
.el-upload--picture-card {
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
}

.el-dialog__header {
    padding: 0 !important;
    line-height: 60px;
}
</style>